<style scoped="true" lang="less">
    .top {
        height: 152px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        background: #303030;

        img {
            width: 92px;
            height: 92px;
            border-radius: 50%;
        }

        .user {
            height: 55px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 15px;
            /*            border: 1px solid red;*/
            color: #fff;

            a {
                color: #ffbd80;
            }
        }
    }
    .iconfont {
        font-size: 18px;
        margin-right: 10px;
    }

</style>
<template>
    <div id="my">
        <div class="top">
            <img src="../../../assets/img/my.png" alt="">
            <div class="user">
                <p class="phone f14">{{username}}</p>
                <p class="id f12">ID: {{userId}}</p>
                <a @click="logout" class="f12">退出</a>
            </div>
        </div>
        <van-cell class="mg-top-10" value="0 张" is-link>
            <i slot="icon" class="iconfont icon-caipiaozhuanhuan cbbc" style="font-size: 16px;"></i>
            <span slot="title" class="van-cell-text">影票订单</span>
        </van-cell>

        <van-cell class="mg-top-10" value="0 张" icon="shop" is-link>
            <i slot="icon" class="icon iconfont icon-SandGlass cbbc"></i>
            <span slot="title" class="van-cell-text">影票代付订单</span>
        </van-cell>

        <van-cell class="mg-top-10" value="0 张" is-link>
              <i slot="icon" class="icon iconfont icon-mall c95c"></i>
            <span slot="title" class="van-cell-text">商城订单</span>
        </van-cell>

        <van-cell-group class="mg-top-10">
            <van-cell value="0 张" icon="shop" is-link>
                <i slot="icon" class="icon iconfont icon-iconcoupon cffb"></i>
                <span slot="title" class="van-cell-text">我的现金券</span>
            </van-cell>
             <van-cell value="0 张" icon="shop" is-link>
                 <i slot="icon" class="icon iconfont icon-coin cfaa"></i> 
                <span slot="title" class="van-cell-text">账户余额</span>
            </van-cell>
             <van-cell value="0 张" icon="shop" is-link>
                <i slot="icon" class="icon iconfont icon-card c80d"></i>
                <span slot="title" class="van-cell-text">我的卖座卡</span>
            </van-cell>
        </van-cell-group>
    </div>
</template>


<script>
    import { mapGetters } from 'vuex'
    import axios from 'axios'
    import {
        Icon,
        Cell,
        CellGroup
    } from 'vant'
    export default {
        data() {
            return {

            }
        },
        created() {
        	if (!this.isLogin) {
        		this.$router.push('/account/login');
        	}
        },
        computed: {
            ...mapGetters(['userId','username','isLogin'])
        },
        components: {
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup
        },
        methods: {
            logout() {
                let url = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/logout';
                axios.get(url).then((res)=> {
                    if (res.data.status === 0) {
                        this.$store.commit('username','');
                        this.$store.commit('userId','');
                       this.$store.commit('isLogin',false);
                        this.$router.push('/');
                    } else {
                        alert(res.msg);
                    }
                }).catch(()=> {
                    alert('登出失败');
                })
            }
        }
    }

</script>
